<script src="@/js/gongju/bazipaipan.js"></script>

<template>

  <div id="app" class="bazipaipan">
    <div class="margins">

      <!-- 面包屑导航 -->
      <el-affix :offset="80">
        <div class="navigation">
          <Breadcrumb separator=">">
            <BreadcrumbItem to="/">
              <Icon type="ios-home" />
              首页
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-color-wand" />
              工具
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-pin" />
              八字排盘
            </BreadcrumbItem>
          </Breadcrumb>
        </div>

        <!-- 更多工具 -->
        <div class="prediction">
          更多工具：
          <span class="spacing">
            <router-link to="/gongju/qimendunjia">
              奇门排盘
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span class="spacing">
            <router-link to="/gongju/liuyao">
              六爻起卦
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
          <span>
            <router-link to="/gongju/meihuayishu">
              梅花易数起卦
              <Icon type="ios-open-outline" />
            </router-link>
          </span>
        </div>

        <!-- 分割线 -->
        <div class="divider">
          <el-divider />
        </div>
      </el-affix>

      <!-- 数据 -->
      <div v-if="!dataDStatus">
        <el-empty description="努力加载中">
          <Button v-if="reLoadingButton" @click="starts(true)" class="reLoading-button">重新加载</Button>
          <Button v-else loading class="reLoading-button">加载中...</Button>
        </el-empty>
      </div>
      <div v-if="dataDStatus">

        <!-- ★未排盘 -->
        <div v-show="!dataStatus">
          <el-row :gutter="5">

            <!-- 其他默认数据 -->
            <el-col :span="6">
              <el-card shadow="always" class="default-other">
                <div class="header">
                  预览
                </div>
                <div>
                  <span class="title">姓名：</span>
                  <span v-show="'' !== name">
                    <Ellipsis :text="name" :length="13" tooltip />
                  </span>
                  <span v-show="'' === name" class="null">未填写</span>
                </div>
                <div>
                  <span class="title">占事：</span>
                  <span v-show="'' !== occupy">
                    <Ellipsis :text="occupy" :length="13" tooltip />
                  </span>
                  <span v-show="'' === occupy" class="null">未填写</span>
                </div>
                <div>
                  <span class="title">公历：</span>
                  <Ellipsis :text="dataD.solarStr" :length="17" tooltip />
                </div>
                <div>
                  <span class="title">农历：</span>
                  <Ellipsis :text="dataD.lunarStr" :length="15" tooltip />
                </div>
                <div>
                  <span class="title">生肖：</span>
                  {{ dataD.shengXiao }}
                </div>
                <div>
                  <span class="title">星座：</span>
                  {{ dataD.xingZuo }}
                </div>
                <div>
                  <span class="title">生辰八字：</span>
                  {{ dataD.baZi.join('&nbsp;&nbsp;') }}
                </div>
                <div>
                  <span class="title">八字五行：</span>
                  <span v-for="index in dataD.baZiWuXing.length" :key="index">
                    <span v-html="WuXingColor2(dataD.baZiWuXing[index - 1])"></span>&nbsp;
                  </span>
                </div>
                <div>
                  <span class="title">起运日期：</span>
                  {{ dataD.qiYunDate }}
                </div>
                <div>
                  <span class="title">胎元：</span>
                  {{ dataD.taiYuan }}
                </div>
                <div>
                  <span class="title">胎息：</span>
                  {{ dataD.taiXi }}
                </div>
                <div>
                  <span class="title">命宫：</span>
                  {{ dataD.mingGong }}
                </div>
                <div>
                  <span class="title">身宫：</span>
                  {{ dataD.shenGong }}
                </div>
                <div>
                  <span class="title">五行得失：</span>
                  <span v-if="dataD.baZiWuXingQueShi[0] === '五行齐全'">五行齐全</span>
                  <span v-else>
                    <span v-for="index in dataD.baZiWuXingQueShi.length" :key="index">
                      缺<span v-html="WuXingColor(dataD.baZiWuXingQueShi[index - 1])"></span>&nbsp;
                    </span>
                  </span>
                </div>
                <div>
                  <span class="title">五行格局：</span>
                  <span v-for="index in dataD.baZiWuXingGeJu.length" :key="index">
                    {{ dataD.baZiWuXingGeJu[index - 1].substring(0, 1) }}<span
                      v-html="WuXingColor(dataD.baZiWuXingGeJu[index - 1].substring(1, 2))"></span>&nbsp;
                  </span>
                </div>

                <div class="more">
                  <span class="button" @click="starts(false)">
                    <Icon type="md-add-circle" />
                    更多信息
                  </span>
                </div>


              </el-card>
            </el-col>

            <!-- 默认排盘数据 -->
            <el-col :span="9">
              <el-card shadow="never" class="default">

                <div class="top">
                  <div class="left">
                    <div class="date">
                      公历：{{ dataD.solarStr }}
                      <br />
                      农历：{{ dataD.lunarStr }}
                    </div>
                  </div>

                  <div class="right">
                    <router-link to="/wenhua/shengxiao">
                      <b class="sheng-xiao" title="生肖">{{ dataD.shengXiao }}</b>
                    </router-link>
                  </div>
                </div>

                <div class="bottom">

                  <div class="go1 mark">
                    <div class="title">☯</div>
                    <div>年柱</div>
                    <div>月柱</div>
                    <div>日柱</div>
                    <div>时柱</div>
                  </div>

                  <div class="go2 zhuxing">
                    <div class="title">主星</div>
                    <div>{{ dataD.yearGanZhiZhuXing }}</div>
                    <div>{{ dataD.monthGanZhiZhuXing }}</div>
                    <div><b>元{{ dataD.sex }}</b></div>
                    <div>{{ dataD.hourGanZhiZhuXing }}</div>
                  </div>

                  <div class="go1 tiangan">
                    <div class="title">天干</div>
                    <div>
                      <b v-html="ganZhiGaoLiang(dataD.yearGan)"></b>
                      <span v-html="ganZhiWuXing(dataD.yearGan)" class="wuxing"></span>
                    </div>
                    <div>
                      <b v-html="ganZhiGaoLiang(dataD.monthGan)"></b>
                      <span v-html="ganZhiWuXing(dataD.monthGan)" class="wuxing"></span>
                    </div>
                    <div>
                      <b v-html="ganZhiGaoLiang(dataD.dayGan)"></b>
                      <span v-html="ganZhiWuXing(dataD.dayGan)" class="wuxing"></span>
                    </div>
                    <div>
                      <b v-html="ganZhiGaoLiang(dataD.hourGan)"></b>
                      <span v-html="ganZhiWuXing(dataD.hourGan)" class="wuxing"></span>
                    </div>
                  </div>

                  <div class="go2 dizhi">
                    <div class="title">地支</div>
                    <div>
                      <strong v-html="ganZhiGaoLiang(dataD.yearZhi)"></strong>
                      <span v-html="ganZhiWuXing(dataD.yearZhi)" class="wuxing"></span>
                    </div>
                    <div>
                      <strong v-html="ganZhiGaoLiang(dataD.monthZhi)"></strong>
                      <span v-html="ganZhiWuXing(dataD.monthZhi)" class="wuxing"></span>
                    </div>
                    <div>
                      <strong v-html="ganZhiGaoLiang(dataD.dayZhi)"></strong>
                      <span v-html="ganZhiWuXing(dataD.dayZhi)" class="wuxing"></span>
                    </div>
                    <div>
                      <strong v-html="ganZhiGaoLiang(dataD.hourZhi)"></strong>
                      <span v-html="ganZhiWuXing(dataD.hourZhi)" class="wuxing"></span>
                    </div>
                  </div>

                  <div class="go3 canggan">
                    <div class="title2">藏干</div>
                    <div>
                      <span v-for="index in dataD.yearZhiCangGan.length" :key="index">
                        <b v-html="cangGanGaoLiang(dataD.yearZhiCangGan[index - 1])"></b> ·
                        <b v-html="ganZhiWuXing(dataD.yearZhiCangGan[index - 1])"></b> <br />
                      </span>
                    </div>
                    <div>
                      <span v-for="index in dataD.monthZhiCangGan.length" :key="index">
                        <b v-html="cangGanGaoLiang(dataD.monthZhiCangGan[index - 1])"></b> ·
                        <b v-html="ganZhiWuXing(dataD.monthZhiCangGan[index - 1])"></b> <br />
                      </span>
                    </div>
                    <div>
                      <span v-for="index in dataD.dayZhiCangGan.length" :key="index">
                        <b v-html="cangGanGaoLiang(dataD.dayZhiCangGan[index - 1])"></b> ·
                        <b v-html="ganZhiWuXing(dataD.dayZhiCangGan[index - 1])"></b> <br />
                      </span>
                    </div>
                    <div>
                      <span v-for="index in dataD.hourZhiCangGan.length" :key="index">
                        <b v-html="cangGanGaoLiang(dataD.hourZhiCangGan[index - 1])"></b> ·
                        <b v-html="ganZhiWuXing(dataD.hourZhiCangGan[index - 1])"></b> <br />
                      </span>
                    </div>
                  </div>

                  <div class="go4 fuxing">
                    <div class="title3">副星</div>
                    <div>
                      <span v-for="index in dataD.yearGanZhiFuXing.length" :key="index">
                        {{ dataD.yearGanZhiFuXing[index - 1] }} <br />
                      </span>
                    </div>
                    <div>
                      <span v-for="index in dataD.monthGanZhiFuXing.length" :key="index">
                        {{ dataD.monthGanZhiFuXing[index - 1] }} <br />
                      </span>
                    </div>
                    <div>
                      <span v-for="index in dataD.dayGanZhiFuXing.length" :key="index">
                        {{ dataD.dayGanZhiFuXing[index - 1] }} <br />
                      </span>
                    </div>
                    <div>
                      <span v-for="index in dataD.hourGanZhiFuXing.length" :key="index">
                        {{ dataD.hourGanZhiFuXing[index - 1] }} <br />
                      </span>
                    </div>
                  </div>

                  <div class="go1 dishi">
                    <div class="title">地势</div>
                    <div>{{ dataD.yearGanZhiDiShi }}</div>
                    <div>{{ dataD.monthGanZhiDiShi }}</div>
                    <div>{{ dataD.dayGanZhiDiShi }}</div>
                    <div>{{ dataD.hourGanZhiDiShi }}</div>
                  </div>

                  <div class="go2 kongwang">
                    <div class="title">空亡</div>
                    <div>{{ dataD.yearGanZhiXunKong }}</div>
                    <div>{{ dataD.monthGanZhiXunKong }}</div>
                    <div>{{ dataD.dayGanZhiXunKong }}</div>
                    <div>{{ dataD.hourGanZhiXunKong }}</div>
                  </div>

                  <div class="go1 nayin">
                    <div class="title">纳音</div>
                    <div>{{ dataD.yearGanZhiNaYin }}</div>
                    <div>{{ dataD.monthGanZhiNaYin }}</div>
                    <div>{{ dataD.dayGanZhiNaYin }}</div>
                    <div>{{ dataD.hourGanZhiNaYin }}</div>
                  </div>

                  <div class="shensha">
                    <div class="title">神煞</div>
                    <div>
                      <span v-if="dataD.yearGanZhiShenSha.length === 0">&nbsp;</span>
                      <span v-else v-for="index in dataD.yearGanZhiShenSha.length" :key="index">
                        <p>{{ dataD.yearGanZhiShenSha[index - 1] }}</p>
                      </span>
                      <br />
                    </div>
                    <div>
                      <span v-if="dataD.monthGanZhiShenSha.length === 0">&nbsp;</span>
                      <span v-else v-for="index in dataD.monthGanZhiShenSha.length" :key="index">
                        <p>{{ dataD.monthGanZhiShenSha[index - 1] }}</p>
                      </span>
                      <br />
                    </div>
                    <div>
                      <span v-if="dataD.dayGanZhiShenSha.length === 0">&nbsp;</span>
                      <span v-else v-for="index in dataD.dayGanZhiShenSha.length" :key="index">
                        <p>{{ dataD.dayGanZhiShenSha[index - 1] }}</p>
                      </span>
                      <br />
                    </div>
                    <div>
                      <span v-if="dataD.hourGanZhiShenSha.length === 0">&nbsp;</span>
                      <span v-else v-for="index in dataD.hourGanZhiShenSha.length" :key="index">
                        <p>{{ dataD.hourGanZhiShenSha[index - 1] }}</p>
                      </span>
                      <br />
                    </div>
                  </div>



                </div>

              </el-card>
            </el-col>

            <!-- 选项 -->
            <el-col :span="9">
              <el-card shadow="never" class="option">
                <div>
                  <input placeholder="请输入姓名（选填）" v-model="name" maxlength="30" class="name" />
                  <el-radio v-model="sex" v-for="item in sexOptions" :label="item.label" :key="item" class="sex">
                    {{ item.value }}
                  </el-radio>
                </div>
                <div>
                  <input placeholder="请输入占事（选填）" v-model="occupy" maxlength="30" class="occupy" />
                  <el-checkbox class="leap-month" :disabled="dateType !== 1" v-model="leapMonth"> 闰月 </el-checkbox>
                </div>
                <div class="date">
                  <el-date-picker :clearable="false" v-model="date" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择日期" style="width: 50%;" />
                  <el-radio-group class="date-type" v-model="dateType">
                    <el-radio-button v-for="item in dateTypeOptions" :label="item.label" :key="item">
                      {{ item.value }}
                    </el-radio-button>
                  </el-radio-group>
                </div>
                <!-- <div>
                  <el-checkbox v-model="trueSolar"> 真太阳时 </el-checkbox>
                  <span class="address" v-show="trueSolar">
                    地区：
                    <City class="city" v-model="address" show-suffix @on-change="getAddressName" />
                    <el-tooltip placement="top">
                      <template #content>
                        默认为北京市，依然按照标准时间排盘；
                        <br />
                        若选择其他地区，则按真太阳时排盘。
                      </template>
                <Icon type="md-information-circle" />
                </el-tooltip>
                </span>
                </div> -->
                <div class="qi-yun">
                  <div class="title">起运流派：</div>
                  <el-select class="liupai" v-model="qiYunLiuPai">
                    <el-option v-for="item in qiYunLiuPaiOptions" :label="item.label" :value="item.value"
                      :key="item.value">
                      <span style="float: left">{{ item.label }}</span>
                      <span v-if="item.value === 0"
                        style="float:right; color:#8492a6;font-size:12px;margin-right:-15px;">
                        <Icon type="md-arrow-dropleft-circle" /> 默认
                      </span>
                    </el-option>
                  </el-select>
                  <el-tooltip placement="top">
                    <template #content>
                      按天和时辰计算：3天1年，1天4个月，1时辰10天。
                      <br />
                      按分钟计算：4320分=1年，360分=1月，12分=1天，1分=2小时。
                    </template>
                    <Icon class="tip" type="md-information-circle" />
                  </el-tooltip>
                </div>
                <div class="res">
                  <div class="resetting" @click="resetting">
                    <Icon type="md-sync" />
                    <span>重置</span>
                  </div>
                  <div class="senior" @click="seniorDialog = true">
                    <Icon type="ios-settings" />
                    <span>高级选项</span>
                  </div>
                </div>
                <div>
                  <Button v-if="!startsButton" style="width: 100%" class="starts" @click="starts(false)">开始排盘</Button>
                  <Button v-else loading style="width: 100%" class="starts">排盘中...</Button>
                </div>
              </el-card>
            </el-col>

          </el-row>

        </div>

        <!-- ★已排盘 -->
        <div v-show="dataStatus">
          <div class="return" @click="dataStatus = false">
            返回排盘
          </div>

          <el-row :gutter="10">
            <!-- 表格 -->
            <el-col :span="11">
              <el-card shadow="always" class="table">

                <div class="top">
                  <div class="left">
                    <div class="date">
                      公历：{{ data.solarStr }}
                      <br />
                      农历：{{ data.lunarStr }}
                    </div>
                  </div>
                  <div class="right">
                    <div class="ganzhiyinyang">
                      阴干支斜体&nbsp;
                      <el-switch v-model="ganZhiYinYang" style="--el-switch-on-color: #13ce66;"></el-switch>
                    </div>
                  </div>
                </div>

                <div class="bottom">

                  <div class="go1 mark">
                    <div class="title">☯</div>
                    <div>年柱</div>
                    <div>月柱</div>
                    <div>日柱</div>
                    <div>时柱</div>
                  </div>

                  <div class="go2 zhuxing">
                    <div class="title">主星</div>
                    <div>{{ data.yearGanZhiZhuXing }}</div>
                    <div>{{ data.monthGanZhiZhuXing }}</div>
                    <div><b>元{{ data.sex }}</b></div>
                    <div>{{ data.hourGanZhiZhuXing }}</div>
                  </div>

                  <div class="go1 tiangan">
                    <div class="title">天干</div>
                    <div>
                      <b v-html="ganZhiGaoLiang(data.yearGan)"></b>
                      <span v-html="ganZhiWuXing(data.yearGan)" class="wuxing"></span>
                    </div>
                    <div>
                      <b v-html="ganZhiGaoLiang(data.monthGan)"></b>
                      <span v-html="ganZhiWuXing(data.monthGan)" class="wuxing"></span>
                    </div>
                    <div>
                      <b v-html="ganZhiGaoLiang(data.dayGan)"></b>
                      <span v-html="ganZhiWuXing(data.dayGan)" class="wuxing"></span>
                    </div>
                    <div>
                      <b v-html="ganZhiGaoLiang(data.hourGan)"></b>
                      <span v-html="ganZhiWuXing(data.hourGan)" class="wuxing"></span>
                    </div>
                  </div>

                  <div class="go2 dizhi">
                    <div class="title">地支</div>
                    <div>
                      <strong v-html="ganZhiGaoLiang(data.yearZhi)"></strong>
                      <span v-html="ganZhiWuXing(data.yearZhi)" class="wuxing"></span>
                    </div>
                    <div>
                      <strong v-html="ganZhiGaoLiang(data.monthZhi)"></strong>
                      <span v-html="ganZhiWuXing(data.monthZhi)" class="wuxing"></span>
                    </div>
                    <div>
                      <strong v-html="ganZhiGaoLiang(data.dayZhi)"></strong>
                      <span v-html="ganZhiWuXing(data.dayZhi)" class="wuxing"></span>
                    </div>
                    <div>
                      <strong v-html="ganZhiGaoLiang(data.hourZhi)"></strong>
                      <span v-html="ganZhiWuXing(data.hourZhi)" class="wuxing"></span>
                    </div>
                  </div>

                  <div class="go3 canggan">
                    <div class="title2">藏干</div>
                    <div v-if="data.yearZhiCangGan">
                      <span v-for="index in data.yearZhiCangGan.length" :key="index">
                        <b v-html="cangGanGaoLiang(data.yearZhiCangGan[index - 1])"></b> ·
                        <b v-html="ganZhiWuXing(data.yearZhiCangGan[index - 1])"></b> <br />
                      </span>
                    </div>
                    <div v-if="data.monthZhiCangGan">
                      <span v-for="index in data.monthZhiCangGan.length" :key="index">
                        <b v-html="cangGanGaoLiang(data.monthZhiCangGan[index - 1])"></b> ·
                        <b v-html="ganZhiWuXing(data.monthZhiCangGan[index - 1])"></b> <br />
                      </span>
                    </div>
                    <div v-if="data.dayZhiCangGan">
                      <span v-for="index in data.dayZhiCangGan.length" :key="index">
                        <b v-html="cangGanGaoLiang(data.dayZhiCangGan[index - 1])"></b> ·
                        <b v-html="ganZhiWuXing(data.dayZhiCangGan[index - 1])"></b> <br />
                      </span>
                    </div>
                    <div v-if="data.hourZhiCangGan">
                      <span v-for="index in data.hourZhiCangGan.length" :key="index">
                        <b v-html="cangGanGaoLiang(data.hourZhiCangGan[index - 1])"></b> ·
                        <b v-html="ganZhiWuXing(data.hourZhiCangGan[index - 1])"></b> <br />
                      </span>
                    </div>
                  </div>

                  <div class="go4 fuxing">
                    <div class="title3">副星</div>
                    <div v-if="data.yearGanZhiFuXing">
                      <span v-for="index in data.yearGanZhiFuXing.length" :key="index">
                        {{ data.yearGanZhiFuXing[index - 1] }} <br />
                      </span>
                    </div>
                    <div v-if="data.monthGanZhiFuXing">
                      <span v-for="index in data.monthGanZhiFuXing.length" :key="index">
                        {{ data.monthGanZhiFuXing[index - 1] }} <br />
                      </span>
                    </div>
                    <div v-if="data.dayGanZhiFuXing">
                      <span v-for="index in data.dayGanZhiFuXing.length" :key="index">
                        {{ data.dayGanZhiFuXing[index - 1] }} <br />
                      </span>
                    </div>
                    <div v-if="data.hourGanZhiFuXing">
                      <span v-for="index in data.hourGanZhiFuXing.length" :key="index">
                        {{ data.hourGanZhiFuXing[index - 1] }} <br />
                      </span>
                    </div>
                  </div>

                  <div class="go1 dishi">
                    <div class="title">地势</div>
                    <div>{{ data.yearGanZhiDiShi }}</div>
                    <div>{{ data.monthGanZhiDiShi }}</div>
                    <div>{{ data.dayGanZhiDiShi }}</div>
                    <div>{{ data.hourGanZhiDiShi }}</div>
                  </div>

                  <div class="go2 kongwang">
                    <div class="title">空亡</div>
                    <div>{{ data.yearGanZhiXunKong }}</div>
                    <div>{{ data.monthGanZhiXunKong }}</div>
                    <div>{{ data.dayGanZhiXunKong }}</div>
                    <div>{{ data.hourGanZhiXunKong }}</div>
                  </div>

                  <div class="go1 nayin">
                    <div class="title">纳音</div>
                    <div>{{ data.yearGanZhiNaYin }}</div>
                    <div>{{ data.monthGanZhiNaYin }}</div>
                    <div>{{ data.dayGanZhiNaYin }}</div>
                    <div>{{ data.hourGanZhiNaYin }}</div>
                  </div>

                  <div class="shensha">
                    <div class="title">神煞</div>
                    <div v-if="data.yearGanZhiShenSha">
                      <span v-if="data.yearGanZhiShenSha.length === 0">&nbsp;</span>
                      <span v-else v-for="index in data.yearGanZhiShenSha.length" :key="index">
                        <p>{{ data.yearGanZhiShenSha[index - 1] }}</p>
                      </span>
                      <br />
                    </div>
                    <div v-if="data.monthGanZhiShenSha">
                      <span v-if="data.monthGanZhiShenSha.length === 0">&nbsp;</span>
                      <span v-else v-for="index in data.monthGanZhiShenSha.length" :key="index">
                        <p>{{ data.monthGanZhiShenSha[index - 1] }}</p>
                      </span>
                      <br />
                    </div>
                    <div v-if="data.dayGanZhiShenSha">
                      <span v-if="data.dayGanZhiShenSha.length === 0">&nbsp;</span>
                      <span v-else v-for="index in data.dayGanZhiShenSha.length" :key="index">
                        <p>{{ data.dayGanZhiShenSha[index - 1] }}</p>
                      </span>
                      <br />
                    </div>
                    <div v-if="data.hourGanZhiShenSha">
                      <span v-if="data.hourGanZhiShenSha.length === 0">&nbsp;</span>
                      <span v-else v-for="index in data.hourGanZhiShenSha.length" :key="index">
                        <p>{{ data.hourGanZhiShenSha[index - 1] }}</p>
                      </span>
                      <br />
                    </div>
                  </div>

                </div>

              </el-card>
            </el-col>

            <!-- 大运流年 -->
            <el-col :span="13">
              <el-card shadow="always" class="yunnian">

                <div class="dayun" v-if="daYun && daYun.length">
                  <div class="title"><b> 大运 </b></div>
                  <div v-for="index in 10" :key="index" @click="daYunCut(index)">
                    <span v-if="daYunIndex === index">
                      <div class="div-yes">
                        <b> {{ daYun[index - 1][0] }}年 </b>
                      </div>
                      <div class="div-yes">
                        <span v-if="index === 1">
                          <b v-if="daYun[0][1] !== daYun[1][1]"> {{ daYun[0][1] }}~{{ parseInt(daYun[1][1]) - 1 }}岁 </b>
                          <b v-else> {{ daYun[index - 1][1] }}岁 </b>
                        </span>
                        <span v-else>
                          <b> {{ daYun[index - 1][1] }}岁 </b>
                        </span>
                      </div>
                      <b>
                        <div class="div-yes" v-html="baZiColor(daYun[index - 1][2])"></div>
                      </b>
                      <b>
                        <div class="div-yes shiShen1">{{ daYunShiShen[index - 1][0] }}</div>
                      </b>
                      <b>
                        <div class="div-yes shiShen2">{{ daYunShiShen[index - 1][1] }}</div>
                      </b>
                    </span>
                    <span v-else>
                      <div class="div-no">{{ daYun[index - 1][0] }}年</div>
                      <div class="div-no">
                        <span v-if="index === 1">
                          <span v-if="daYun[0][1] !== daYun[1][1]"> {{ daYun[0][1] }}~{{ parseInt(daYun[1][1]) - 1 }}岁
                          </span>
                          <span v-else>{{ daYun[index - 1][1] }}岁 </span>
                        </span>
                        <span v-else> {{ daYun[index - 1][1] }}岁 </span>
                      </div>
                      <div class="div-no" v-html="baZiColor(daYun[index - 1][2])"></div>
                      <div class="div-no shiShen1">{{ daYunShiShen[index - 1][0] }}</div>
                      <div class="div-no shiShen2">{{ daYunShiShen[index - 1][1] }}</div>
                    </span>
                  </div>
                </div>

                <div class="liunian">
                  <div class="title"><b>流年</b></div>
                  <div v-for="index in liuNian.length" :key="index" @click="liuNianCut(index)">
                    <span v-if="liuNianIndex === index">
                      <div class="div-yes">
                        <b>{{ liuNian[index - 1][0] }}年</b>
                      </div>
                      <div class="div-yes">
                        <b>{{ liuNian[index - 1][1] }}岁</b>
                      </div>
                      <b>
                        <div class="div-yes" v-html="baZiColor(liuNian[index - 1][2])"></div>
                      </b>
                      <b>
                        <div class="div-yes shiShen1">{{ liuNianShiShen[index - 1][0] }}</div>
                      </b>
                      <b>
                        <div class="div-yes shiShen2">{{ liuNianShiShen[index - 1][1] }}</div>
                      </b>
                    </span>
                    <span v-else>
                      <div class="div-no">{{ liuNian[index - 1][0] }}年</div>
                      <div class="div-no">{{ liuNian[index - 1][1] }}岁</div>
                      <div class="div-no" v-html="baZiColor(liuNian[index - 1][2])"></div>
                      <div class="div-no shiShen1">{{ liuNianShiShen[index - 1][0] }}</div>
                      <div class="div-no shiShen2">{{ liuNianShiShen[index - 1][1] }}</div>
                    </span>
                  </div>
                </div>

                <div class="xiaoyun">
                  <div class="title"><b> 小运 </b></div>
                  <div v-for="index in xiaoYun.length" :key="index" @click="liuNianCut(index)">
                    <span v-if="xiaoYun.length !== 0">
                      <span v-if="liuNianIndex === index">
                        <b>
                          <div class="div-yes" v-html="baZiColor(xiaoYun[index - 1][2])"></div>
                        </b>
                        <b>
                          <div class="div-yes shiShen1">{{ xiaoYunShiShen[index - 1][0] }}</div>
                        </b>
                        <b>
                          <div class="div-yes shiShen2">{{ xiaoYunShiShen[index - 1][1] }}</div>
                        </b>
                      </span>
                      <span v-else>
                        <div class="div-no" v-html="baZiColor(xiaoYun[index - 1][2])"></div>
                        <div class="div-no shiShen1">{{ xiaoYunShiShen[index - 1][0] }}</div>
                        <div class="div-no shiShen2">{{ xiaoYunShiShen[index - 1][1] }}</div>
                      </span>
                    </span>
                    <span v-else>
                      <div class="div"></div>
                      <div class="div"></div>
                      <div class="div"></div>
                    </span>
                  </div>
                </div>

                <div class="liuyue" v-if="liuYue && liuYue.length">
                  <div class="title"><b>流月</b></div>
                  <div v-for="index in liuYue.length" :key="index">
                    <div class="div">{{ liuYue[index - 1][0] }}</div>
                    <div class="div" v-html="baZiColor(liuYue[index - 1][1])"></div>
                    <div class="shiShen3">{{ liuYueShiShen[index - 1][0] }}</div>
                    <div class="shiShen3">{{ liuYueShiShen[index - 1][1] }}</div>
                  </div>
                </div>

                <div class="illustrate">
                  <Icon type="md-alert" />
                  大运流年以大运为主、流年为辅，流年通过大运而作用于命局。
                </div>

              </el-card>
            </el-col>
          </el-row>

          <!-- 五行旺衰 -->
          <el-card shadow="never" class="wangshuai">
            <div v-if="data.wuXingWangShuai">
              <span v-for="index in data.wuXingWangShuai.length" :key="index">
                <div class="average">
                  <span v-html="WuXingWangShuaiColor(data.wuXingWangShuai[index - 1])"></span>
                </div>
              </span>
            </div>
          </el-card>

          <!-- 干支留意 -->
          <el-card shadow="never" class="ganzhiliuyi">
            <div class="top">
              <span class="title">天干留意：</span>
              <span v-if="data.tianGanLiuYi">
                <span v-if="data.tianGanLiuYi.length !== 0">
                  {{ data.tianGanLiuYi.join('&nbsp;&nbsp;&nbsp;') }}
                </span>
                <span v-else class="null">暂无数据</span>
              </span>
            </div>
            <div class="mt-10">
              <span class="title">地支留意：</span>
              <span v-if="data.diZhiLiuYi">
                <span v-if="data.diZhiLiuYi.length !== 0">
                  {{ data.diZhiLiuYi.join('&nbsp;&nbsp;&nbsp;') }}
                </span>
                <span v-else class="null">暂无数据</span>
              </span>
            </div>
          </el-card>

          <el-row :gutter="10">
            <!-- 基础信息 -->
            <el-col :span="8">
              <el-card shadow="always" class="foundation">
                <div class="go1">
                  <span class="title">年命信息</span>
                  {{ data.ming }}
                </div>
                <div class="go2">
                  <span class="title">生肖星座</span>
                  {{ data.shengXiao + '&nbsp;&nbsp;&nbsp;' + data.xingZuo }}
                </div>
                <div class="go1">
                  <span class="title">生辰八字</span>
                  <span v-if="data.baZi">
                    {{ data.baZi.join('&nbsp;&nbsp;') }}
                  </span>
                </div>
                <div class="go2">
                  <span class="title">八字五行</span>
                  <span v-if="data.baZiWuXing">
                    <span v-for="index in data.baZiWuXing.length" :key="index">
                      <span v-html="WuXingColor2(data.baZiWuXing[index - 1])"></span>&nbsp;
                    </span>
                  </span>
                </div>
                <div class="go1">
                  <span class="title">八字旬空</span>
                  <span v-if="data.baZiXunKong">
                    {{ data.baZiXunKong.join('&nbsp;&nbsp;') }}
                  </span>
                </div>
                <div class="go2">
                  <span class="title">八字纳音</span>
                  <span v-if="data.baZiNaYin">
                    {{ data.baZiNaYin.join('&nbsp;&nbsp;') }}
                  </span>
                </div>
                <div class="go1">
                  <span class="title">起运信息</span>
                  {{ data.qiYun }}
                </div>
                <div class="go2">
                  <span class="title">起运日期</span>
                  {{ data.qiYunDate }}
                </div>

                <div class="go1">
                  <span class="title">胎元胎息</span>
                  {{ data.taiYuan + '&nbsp;&nbsp;&nbsp;' + data.taiXi }}
                </div>
                <div class="go2">
                  <span class="title">命宫身宫</span>
                  {{ data.mingGong + '&nbsp;&nbsp;&nbsp;' + data.shenGong }}
                </div>

                <div class="go1">
                  <span class="title">身体强弱</span>
                  {{ data.bodyIntensity }}
                </div>
                <div class="go2">
                  <span class="title">喜用神</span>
                  <span v-if="data.xiYongShen && data.xiYongShen.length !== 0">
                    <span v-for="index in data.xiYongShen.length" :key="index">
                      <span v-html="WuXingColor(data.xiYongShen[index - 1])"></span>&nbsp;
                    </span>
                  </span>
                  <span v-else class="null">暂无数据</span>
                </div>

                <div class="go1">
                  <span class="title">喜用神方位</span>
                  <span v-if="data.xiYongShenFangWei && data.xiYongShenFangWei.length !== 0">
                    {{ data.xiYongShenFangWei.join('&nbsp;&nbsp;') }}
                  </span>
                  <span v-else class="null">暂无数据</span>
                </div>
                <div class="go2">
                  <span class="title">五行得失</span>
                  <span class="content" v-if="data.baZiWuXingQueShi">
                    <span v-if="data.baZiWuXingQueShi[0] === '五行齐全'">五行齐全</span>
                    <span v-else>
                      <span v-for="index in data.baZiWuXingQueShi.length" :key="index">
                        缺<span v-html="WuXingColor(data.baZiWuXingQueShi[index - 1])"></span>&nbsp;
                      </span>
                    </span>
                  </span>
                </div>

                <div class="go1">
                  <span class="title">五行格局</span>
                  <span class="content" v-if="data.baZiWuXingGeJu">
                    <span v-for="index in data.baZiWuXingGeJu.length" :key="index">
                      {{ data.baZiWuXingGeJu[index - 1].substring(0, 1) }}
                      <span v-html="WuXingColor(data.baZiWuXingGeJu[index - 1].substring(1, 2))"></span>&nbsp;
                    </span>
                  </span>
                </div>




              </el-card>
            </el-col>

            <!-- 财运、桃花 -->
            <el-col :span="8">
              <el-card shadow="always" class="caihua">
                <Tabs>
                  <TabPane label="正财年">
                    <div v-if="data.zhengCaiYun && data.zhengCaiYun.length">
                      <span v-for="index in data.zhengCaiYun.length" :key="index">
                        <div class="jianju">
                          <span v-html="baZiColor(data.zhengCaiYun[index - 1][2])"></span>年
                          ({{ data.zhengCaiYun[index - 1][0] }}年&nbsp;{{ data.zhengCaiYun[index - 1][1] }}岁)
                        </div>
                        <span v-if="index % 3 === 0"><br /></span>
                      </span>
                    </div>
                  </TabPane>
                  <TabPane label="偏财年">
                    <div v-if="data.pianCaiYun && data.pianCaiYun.length">
                      <div v-for="index in data.pianCaiYun.length" :key="index">
                        <div class="jianju">
                          <span v-html="baZiColor(data.pianCaiYun[index - 1][2])"></span>年
                          ({{ data.pianCaiYun[index - 1][0] }}年&nbsp;{{ data.pianCaiYun[index - 1][1] }}岁)
                        </div>
                        <span v-if="index % 3 === 0"><br /></span>
                      </div>
                    </div>
                  </TabPane>
                  <TabPane label="正桃花年">
                    <div v-if="data.zhengTaoHua && data.zhengTaoHua.length">
                      <div v-for="index in data.zhengTaoHua.length" :key="index">
                        <div class="jianju">
                          <span v-html="baZiColor(data.zhengTaoHua[index - 1][2])"></span>年
                          ({{ data.zhengTaoHua[index - 1][0] }}年&nbsp;{{ data.zhengTaoHua[index - 1][1] }}岁)
                        </div>
                        <span v-if="index % 3 === 0"><br /></span>
                      </div>
                    </div>
                  </TabPane>
                  <TabPane label="偏桃花年">
                    <div v-if="data.pianTaoHua && data.pianTaoHua.length">
                      <span v-for="index in data.pianTaoHua.length" :key="index">
                        <div class="jianju">
                          <span v-html="baZiColor(data.pianTaoHua[index - 1][2])"></span>年
                          ({{ data.pianTaoHua[index - 1][0] }}年&nbsp;{{ data.pianTaoHua[index - 1][1] }}岁)
                        </div>
                        <span v-if="index % 3 === 0"><br /></span>
                      </span>
                    </div>
                  </TabPane>
                </Tabs>
              </el-card>
            </el-col>

            <!-- 其他信息 -->
            <el-col :span="8">
              <el-card shadow="always" class="other">
                <Tabs>
                  <TabPane label="日柱论命">
                    {{ data.dayZhuLunMing }}
                  </TabPane>
                  <TabPane label="姻缘分析">
                    {{ data.yinYuan }}
                  </TabPane>
                  <TabPane label="五行分析">
                    {{ data.wuXingFenXi }}
                  </TabPane>
                  <TabPane label="袁天罡称骨">
                    <b>骨重：</b><span class="guzhong">{{ data.guZhong }}</span> <br /><br />
                    <b>分析：</b>{{ data.guZhongInfo }}
                  </TabPane>
                </Tabs>
              </el-card>
            </el-col>
          </el-row>

          <!-- 星宿 -->
          <el-card shadow="never" class="xingxiu">
            <div class="spacing">
              <div>
                <b>星宿：</b>
                {{ data.xingXiu }}
              </div>
              <div>
                <b>解读：</b>
                <span class="interpret">
                  {{ data.xiuJiXiong + '，' + data.xiuJiXiongGeJue }}
                </span>
              </div>
            </div>
          </el-card>

          <!-- 命卦 -->
          <el-card shadow="never" class="minggua">
            <div class="spacing">
              <div>
                <b>命卦：</b>
                <span v-if="data.mingGua">
                  {{ data.mingGua[0] + '（' + data.mingGua[1] + '）' }}
                </span>
              </div>
              <div>
                <b>解读：</b>
                <span v-if="data.mingGua" class="interpret">
                  {{ data.mingGua[2] + '，' + data.mingGua[3] }}
                </span>
              </div>
            </div>
          </el-card>

          <!-- 大运运势 -->
          <el-card shadow="never" class="dayunshi" v-if="null !== data.daYunYunShi">
            <div class="divider">
              <el-divider>
                大运运势
                <Tooltip content="信息仅供参考，禁止对号入座！" placement="top">
                  <Icon type="md-warning" />
                </Tooltip>
              </el-divider>
            </div>

            <div v-if="data.daYunYunShi && data.daYunYunShi.length" style="padding-bottom: 80px">
              <div style="margin: 0 auto; text-align: center">起运日期(公历)：{{ data.qiYunDate }}</div>
              <br />
              <div v-for="index in data.daYunYunShi.length" :key="index" class="jianju">
                <span>{{ data.daYunYunShi[index - 1][0] }}：</span>
                <span v-if="data.daYunYunShi[index - 1][1].split('、')[0].substring(5, 8) === '上升'"
                  style="color: #007600">
                  {{ data.daYunYunShi[index - 1][1].split('、')[0] }}<b>↑</b>
                </span>
                <span v-if="data.daYunYunShi[index - 1][1].split('、')[0].substring(5, 8) === '下降'" style="color: red">
                  {{ data.daYunYunShi[index - 1][1].split('、')[0] }}<b>↓</b>
                </span>
                <span v-if="data.daYunYunShi[index - 1][1].split('、')[0].substring(5, 8) === '不降'"
                  style="color: #646464; margin-right: 7px">
                  {{ data.daYunYunShi[index - 1][1].split('、')[0] }}
                </span>
                ，
                <span v-if="data.daYunYunShi[index - 1][1].split('、')[1].substring(5, 8) === '上升'"
                  style="color: green; margin-right: 20px">
                  {{ data.daYunYunShi[index - 1][1].split('、')[1] }}<b>↑</b>
                </span>
                <span v-if="data.daYunYunShi[index - 1][1].split('、')[1].substring(5, 8) === '下降'"
                  style="color: red; margin-right: 20px">
                  {{ data.daYunYunShi[index - 1][1].split('、')[1] }}<b>↓</b>
                </span>
                <span v-if="data.daYunYunShi[index - 1][1].split('、')[1].substring(5, 8) === '不降'"
                  style="color: #646464; margin-right: 20px">
                  {{ data.daYunYunShi[index - 1][1].split('、')[1] }}
                </span>
              </div>
            </div>
          </el-card>

          <!-- 流年运势 -->
          <el-card shadow="never" class="dayunshi" v-if="null !== data.liuNianYunShi">
            <div class="divider">
              <el-divider>
                流年运势
                <Tooltip content="信息仅供参考，禁止对号入座！" placement="top">
                  <Icon type="md-warning" />
                </Tooltip>
              </el-divider>
            </div>

            <div v-if="data.liuNianYunShi && data.liuNianYunShi.length" style="padding-bottom: 800px">
              <div v-for="index in data.liuNianYunShi.length" :key="index" class="jianju">
                <span style="float: left">
                  {{ data.liuNianYunShi[index - 1][0] }}
                  (<span v-html="baZiColor(data.liuNian[index - 1][2])"></span>年)：
                </span>
                <span v-if="data.liuNianYunShi[index - 1][1].split('、')[0].substring(5, 8) === '上升'"
                  style="color: #007600; float: left">
                  {{ data.liuNianYunShi[index - 1][1].split('、')[0] }}<b>↑</b>
                </span>
                <span v-if="data.liuNianYunShi[index - 1][1].split('、')[0].substring(5, 8) === '下降'"
                  style="color: red; float: left">
                  {{ data.liuNianYunShi[index - 1][1].split('、')[0] }}<b>↓</b>
                </span>
                <span v-if="data.liuNianYunShi[index - 1][1].split('、')[0].substring(5, 8) === '不降'"
                  style="color: #646464; float: left; margin-right: 7px">
                  {{ data.liuNianYunShi[index - 1][1].split('、')[0] }}
                </span>
                ，
                <span v-if="data.liuNianYunShi[index - 1][1].split('、')[1].substring(5, 8) === '上升'"
                  style="color: green">
                  {{ data.liuNianYunShi[index - 1][1].split('、')[1] }}<b>↑</b>
                </span>
                <span v-if="data.liuNianYunShi[index - 1][1].split('、')[1].substring(5, 8) === '下降'" style="color: red">
                  {{ data.liuNianYunShi[index - 1][1].split('、')[1] }}<b>↓</b>
                </span>
                <span v-if="data.liuNianYunShi[index - 1][1].split('、')[1].substring(5, 8) === '不降'"
                  style="color: #646464">
                  {{ data.liuNianYunShi[index - 1][1].split('、')[1] }}
                </span>
              </div>
            </div>
          </el-card>

          <div class="center">
            更多功能正在完善中，敬请期待 ...
          </div>

        </div>
      </div>

    </div>

    <!-- 高级选项窗口 -->
    <el-dialog v-model="seniorDialog" width="500" :lock-scroll="false" style="border-radius: 26px"
      class="senior-dialog">
      <template #header>
        <span class="header-senior">高级选项</span>
      </template>
      <el-card shadow="always" class="senior-card">
        <div class="t-senior">四柱选项</div>
        <div>
          年柱&nbsp;
          <el-select v-model="yearGanZhiSet" style="width: 87%" size="small">
            <el-option v-for="item in yearGanZhiSetOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 1" style="float:right; color:#8492a6;font-size:12px; margin-right:-15px;">
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          月柱&nbsp;
          <el-select v-model="monthGanZhiSet" style="width: 87%" size="small">
            <el-option v-for="item in monthGanZhiSetOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 1" style="float:right; color:#8492a6;font-size:12px; margin-right:-15px;">
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          日柱&nbsp;
          <el-select v-model="dayGanZhiSet" style="width: 87%" size="small">
            <el-option v-for="item in dayGanZhiSetOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 1" style="float:right; color:#8492a6;font-size:12px; margin-right:-15px;">
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
        <div>
          时柱&nbsp;
          <el-select v-model="hourGanZhiSet" style="width: 87%" size="small">
            <el-option v-for="item in hourGanZhiSetOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 0" style="float:right; color:#8492a6;font-size:12px; margin-right:-15px;">
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
        </div>
      </el-card>
      <el-card shadow="always" class="senior-card">
        <div class="t-senior">神煞选项</div>
        <div>
          词馆&nbsp;
          <el-select v-model="ciGuanSet" style="width: 82.5%" size="small">
            <el-option v-for="item in ciGuanSetOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 0" style="float:right; color:#8492a6;font-size:12px; margin-right:-15px;">
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
          <el-tooltip placement="right">
            <template #content>
              <div><b> 一、禄命法：（以年柱纳音查月支、日支、时支）</b></div>
              <div>年命属木，月支或日支或时支有寅。（庚寅为正词馆）</div>
              <div>年命属火，月支或日支或时支有巳。（乙巳为正词馆）</div>
              <div>年命属土，月支或日支或时支有亥。（丁亥为正词馆）</div>
              <div>年命属金，月支或日支或时支有申。（壬申为正词馆）</div>
              <div>年命属水，月支或日支或时支有亥。（癸亥为正词馆）</div>
              <br />
              <div><b> 二、子平法：（以年干、日干查四柱）</b></div>
              <div>年干或日干为甲，并且其他四柱有已或亥。</div>
              <div>年干或日干为乙，并且其他四柱有壬或午。</div>
              <div>年干或日干为丙，并且其他四柱有丙或寅。</div>
              <div>年干或日干为丁，并且其他四柱有丁或酉。</div>
              <div>年干或日干为戊，并且其他四柱有戊或寅。</div>
              <div>年干或日干为己，并且其他四柱有己或酉。</div>
              <div>年干或日干为庚，并且其他四柱有辛或巳。</div>
              <div>年干或日干为辛，并且其他四柱有甲或子。</div>
              <div>年干或日干为壬，并且其他四柱有甲或申。</div>
              <div>年干或日干为癸，并且其他四柱有乙或卯。</div>
            </template>
            <Icon class="tip" type="md-information-circle" />
          </el-tooltip>
        </div>
        <div>
          学堂&nbsp;
          <el-select v-model="xueTangSet" style="width: 82.5%" size="small">
            <el-option v-for="item in xueTangSetOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">
                {{ item.label }}
              </span>
              <span v-if="item.value === 0" style="float:right; color:#8492a6;font-size:12px;margin-right:-15px;">
                <Icon type="md-arrow-dropleft-circle" /> 默认
              </span>
            </el-option>
          </el-select>
          <el-tooltip placement="right">
            <template #content>
              <div><b> 一、禄命法：（以年柱纳音查月支、日支、时支）</b></div>
              <div>年命属木，月支或日支或时支有亥。（己亥为正学堂）</div>
              <div>年命属火，月支或日支或时支有寅。（丙寅为正学堂）</div>
              <div>年命属土，月支或日支或时支有申。（戊申为正学堂）</div>
              <div>年命属金，月支或日支或时支有巳。（辛巳为正学堂）</div>
              <div>年命属水，月支或日支或时支有申。（甲申为正学堂）</div>
              <br />
              <div><b> 二、子平法：（以年干、日干查四柱）</b></div>
              <div>年干或日干为甲，并且其他四柱有已或亥。</div>
              <div>年干或日干为乙，并且其他四柱有壬或午。</div>
              <div>年干或日干为丙，并且其他四柱有丙或寅。</div>
              <div>年干或日干为丁，并且其他四柱有丁或酉。</div>
              <div>年干或日干为戊，并且其他四柱有戊或寅。</div>
              <div>年干或日干为己，并且其他四柱有己或酉。</div>
              <div>年干或日干为庚，并且其他四柱有辛或巳。</div>
              <div>年干或日干为辛，并且其他四柱有甲或子。</div>
              <div>年干或日干为壬，并且其他四柱有甲或申。</div>
              <div>年干或日干为癸，并且其他四柱有乙或卯。</div>
            </template>
            <Icon class="tip" type="md-information-circle" />
          </el-tooltip>
        </div>
      </el-card>
      <template #footer>
        <div class="dialog-footer center">
          <Button @click="seniorDialog = false" style="width: 100%; border-radius: 10px"> 确定 </Button>
        </div>
      </template>
    </el-dialog>

    <!-- 四柱转日期弹窗 -->
    <el-dialog v-model="siZhuDialog" width="600" :lock-scroll="false" style="border-radius: 26px" class="sizhu-dialog">
      <template #header>
        <span class="header-sizhu">四柱转日期</span>
      </template>
      <el-card shadow="always" class="sizhu-card">
        <div v-if="siZhuToDateTotal === 0">
          <div>
            年份范围：
            <input class="year-input mouse-text" placeholder="请输入起始年份" v-model="beginYear" />
            ~ 至今
            <a class="sizhu-res" @click="beginYear = 1900">重置</a>
          </div>
          <div>
            年柱：
            <el-select placement="right" v-model="yearGanZhi" style="width: 240px" placeholder="请选择年柱（年干支）"
              size="small">
              <el-option v-for="item in ganZhiOptions" :key="item.value" :label="item.label" :value="item.value">
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span v-if="item.label === yearGanZhi2"
                  style="float: right; color: #8492a6; font-size: 12px; margin-right: -10px">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前年柱（年干支）
                </span>
              </el-option>
            </el-select>
          </div>
          <div>
            月柱：
            <el-select placement="right" v-model="monthGanZhi" style="width: 240px" placeholder="请选择月柱（月干支）"
              size="small">
              <el-option v-for="item in ganZhiOptions" :key="item.value" :label="item.label" :value="item.value">
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span v-if="item.label === monthGanZhi2"
                  style="float: right; color: #8492a6; font-size: 12px; margin-right: -10px">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前月柱（月干支）
                </span>
              </el-option>
            </el-select>
          </div>
          <div>
            日柱：
            <el-select placement="right" v-model="dayGanZhi" style="width: 240px" placeholder="请选择日柱（日干支）" size="small">
              <el-option v-for="item in ganZhiOptions" :key="item.value" :label="item.label" :value="item.value">
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span v-if="item.label === dayGanZhi2"
                  style="float: right; color: #8492a6; font-size: 12px; margin-right: -10px">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前日柱（日干支）
                </span>
              </el-option>
            </el-select>
          </div>
          <div>
            时柱：
            <el-select placement="right" v-model="hourGanZhi" style="width: 240px" placeholder="请选择时柱（时干支）"
              size="small">
              <el-option v-for="item in ganZhiOptions" :key="item.value" :label="item.label" :value="item.value">
                <span style="float: left">
                  {{ item.label }}
                </span>
                <span v-if="item.label === hourGanZhi2"
                  style="float: right; color: #8492a6; font-size: 12px; margin-right: -10px">
                  <Icon type="md-arrow-dropleft-circle" />
                  当前时柱（时干支）
                </span>
              </el-option>
            </el-select>
          </div>
        </div>
        <div v-else>
          <Table height="300" size="small" highlight-row :columns="siZhuToDateColumns" :data="siZhuToDate">
            <template #action="{ row, index }">
              <Button type="primary" size="small" @click="setNewDate(row.solar)">选择</Button>
            </template>
          </Table>
          <div class="count">
            从公元{{ beginYear2 }}年~至今共&nbsp;{{ siZhuToDateTotal }}&nbsp;条日期
            【{{ yearGanZhi2 + '&nbsp;' + monthGanZhi2 + '&nbsp;' + dayGanZhi2 + '&nbsp;' + hourGanZhi2 }}】
          </div>
        </div>
      </el-card>
      <template #footer>
        <div class="dialog-footer center">
          <span v-if="siZhuToDateTotal === 0">
            <Button v-if="!siZhuButton" @click="getSiZhuToDate" style="width: 100%; border-radius: 10px">获取日期</Button>
            <Button v-else loading style="width: 100%; border-radius: 10px">日期获取中...</Button>
          </span>
          <Button v-else @click="siZhuToDateTotal = 0" style="width: 100%; border-radius: 10px"> 重新获取 </Button>
        </div>
      </template>
    </el-dialog>

  </div>

</template>

<style scoped lang="less" src="@/css/gongju/bazipaipan.scss"></style>
